<template>
  <div id="Content-page">
    <div class="content-main">
      <div class="transaction-query">
        <div class="transaction-item">
          <el-text size="large">交易查询</el-text>
          <el-date-picker
            class="transaction-filter"
            v-model="queryOrder.orderTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="x"
          />
        </div>
        <div class="transaction-item">
          <el-text size="large">订单号</el-text>
          <el-input
            v-model="queryOrder.orderNumber"
            placeholder="请输入完整订单号精确查询"
            class="transaction-filter"
          ></el-input>
        </div>
        <div class="transaction-item">
          <el-text size="large">支付方式</el-text>
          <el-select
            v-model="queryOrder.paymentMethod"
            placeholder="选择支付方式"
            class="transaction-filter"
            clearable
          >
            <el-option
              v-for="item in paymentMethods"
              :key="item"
              :label="item.title"
              :value="item.paymentName"
            />
          </el-select>
        </div>
        <div class="transaction-item">
          <el-text size="large">桌号</el-text>
          <el-input
            v-model="queryOrder.tableNumber"
            placeholder="请输入完整桌号"
            class="transaction-filter"
            type="number"
          ></el-input>
        </div>
        <div class="transaction-item">
          <el-text size="large">用餐人数</el-text>
          <el-input
            v-model="queryOrder.diningPartySize"
            placeholder="请输入用餐人数"
            class="transaction-filter"
            type="number"
          ></el-input>
        </div>
      </div>
      <!-- 查询 -->
      <el-button id="new-button" class="query-button" @click="buttonQueryOrder">查询</el-button>
      <!-- 表格订单数据 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="orderTime" label="交易时间" />
        <el-table-column prop="productName" label="商品" />
        <el-table-column prop="productOrderCount" label="商品数量" />
        <el-table-column label="支付方式">
          <template #default="{ row }">
            <p>{{ paymentMethodApi("003", 0, row.paymentMethod) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="paymentPrice" label="交易金额(元)" />
        <el-table-column label="订单详情">
          <template #default="{ row }">
            <el-button size="small" id="new-button" @click="orderDetail(row._id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页 -->
    <el-pagination
      class="pager-next"
      background
      layout="prev, pager, next"
      :total="totalQuantity"
      hide-on-single-page
      :current-page="queryOrder.page"
      @current-change="currentChange"
    >
    </el-pagination>
  </div>
  <OrderDetail ref="openDrawer"></OrderDetail>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { queryOrderApi, queryItemOrderApi } from "@/api/api";
import type { queryOrderRes } from "@/types/index";
import OrderDetail from "@/page/order-management/components/order-details.vue";
// 初次进入页面请求订单数据
onMounted(async () => {
  const res = await queryOrderApi();
  // console.log(res);
  tableData.value = res.data.res;
  totalQuantity.value = res.data.total;
});
// 存储表格订单数据
const tableData = ref<queryOrderRes[]>([]);
// 数据总条数
const totalQuantity = ref(0);
// 存储查询的值
const queryOrder = reactive({
  orderTime: [],
  orderNumber: "",
  paymentMethod: "",
  tableNumber: "",
  diningPartySize: "",
  page: 1,
});
// 支付方式
import { paymentMethodApi } from "@/api/other";
const paymentMethods = paymentMethodApi("001") as {
  icon: string;
  title: string;
  paymentName: string;
}[];
// 分页查询
function currentChange(value: number) {
  queryOrder.page = value;
  queryOrderData();
}
// 点击多条件查询
function buttonQueryOrder() {
  queryOrder.page = 1;
  queryOrderData();
}
// 查询订单:多条件查询
async function queryOrderData() {
  const res = await queryOrderApi({
    orderTime: queryOrder.orderTime,
    orderNumber: queryOrder.orderNumber,
    paymentMethod: queryOrder.paymentMethod,
    tableNumber: queryOrder.tableNumber,
    diningPartySize: queryOrder.diningPartySize,
    page: queryOrder.page,
  });
  console.log(res);
  tableData.value = res.data.res;
  totalQuantity.value = res.data.total;
}
// 查询单个订单详情
const openDrawer = ref();
async function orderDetail(id: string) {
  const res = await queryItemOrderApi({ goods_id: id });
  openDrawer.value.openDrawer(true, res.data);
}
</script>

<style scoped>
.transaction-query {
  display: flex;
  flex-wrap: wrap;
}
.transaction-item {
  display: flex;
  align-items: center;
  flex: 0 0 calc(33.33% - 15px); /* 每行显示3个元素，设置间隔为10px */
  margin-bottom: 15px;
  margin-right: 15px;
}
.transaction-item >>> .el-range-editor.el-input__wrapper {
  width: 250px !important;
  margin-left: 10px;
  flex: 1;
}
.transaction-filter {
  flex: 1;
  margin-left: 10px;
}
.query-button {
  margin: 10px 0 20px 0;
}
</style>
